<template>
        <div class="version-container" > <!-- 创建一个用于显示版本号的容器 -->
    <p class="version-number" >{{ version }}</p> <!-- 显示版本号 -->
  </div>
        <div class="wrapddd">
        
        <div class="imgWrap22222">
            <img src="@/assets/menu1white.svg" alt="menu">
            <h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ status }}  {{ store.$state.locale == 1 ?
                data.title.split(";")[0] : data.title.split(";")[1] }}
            </h4>
        </div>
        <div class="nav">
            <li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
                <img src="@/assets/home.svg" alt="menu">
                <span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
            </li>
            <li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
                <img src="@/assets/menu.svg" alt="menu">
                <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
            </li>
            <li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
                <!-- <div class="ipoWrap">
                    <div>
                     
                    </div>

                </div> -->
                <img src="@/assets/book.svg" alt="menu">
                <span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>


            </li>
            <li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
                <img src="@/assets/menucalendar.svg" alt="menu">
                <span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
               
            </li>
           
            <li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
                <div class="ipoWrap">
                    <div class="icon">
                        <img src="@/assets/language.svg" alt="menu">
                        <span>{{ $t(i18n.global.t('home.Languages')) }}</span>
                    </div>
                    <img src="@/assets/arrow-up.svg" v-if="store.$state.mobileActiveShow == 5 && showalanguge" style="margin-right: 10px;">
                    <img src="@/assets/arrow.svg" alt="" style="margin-right: 10px;" v-else>
                    
                    <!-- <div class="arrow" :style="{
                        transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
                    }
                        ">
                        <img src="@/assets/arrow-left.svg" alt="" style="width: 23px;height: 23px;">
                    </div> -->
                </div>
                <div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
            <li @click="handleLang1">English</li>
            <li @click="handleLang2">繁體中文</li>
            <li @click="handleLang3">简体中文</li>
        </div>
        </li>

    </div>
    </div>
    
 
</template>



<script lang="ts" setup>
import { inject } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { ref, onMounted } from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing, getDate, getVersion } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any)
const version = ref()
//const drawer1 = ref(false)
const setState = (number: number) => {
    store.setMobileActiveShow(number)
    if (number == 1) {
        proxy.$router.push("/home")

    }
    if (number == 2) {
        proxy.$router.push("/dashboard")
    }
    if (number == 3) {
        proxy.$router.push("/IPO")
       
    }
    if (number == 4) {
        proxy.$router.push("/IPOcalendar")
        store.setMobileActiveShow(1)
     
       
    }
    setTimeout(() => {
        handleOnDrwaer(false)
    })
}

const store = ipoStore()
const showalanguge = ref(false)
let emit = defineEmits(['childfn'])
const status = ref()
const handleOnDrwaer = inject('handleOnDrwaer') as Function

const props = defineProps({
    drawer: Boolean,
    drawer1:Boolean
})
const data = ref()
onMounted(
    async() => {
        const versionnumber = await getVersion().catch((error)=>{console.log(error);
     })
     version.value =( versionnumber as any).data
        const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
        data.value = obj
        console.log('jieshoushuju',data.value.status)
        status.value = data.value.number
    }
)
let drawer = props.drawer


const setState2 = (number: number) => {
    store.setMobileActiveShow(number)
    showalanguge.value = !showalanguge.value
}
const handleLang1 = () => {

    if (proxy.$i18n.locale = 'en') {
        proxy.$i18n.locale = 'en'
    }
    store.setLocale(1)
    emit('childfn', !drawer)
}
const handleLang2 = () => {
    if (proxy.$i18n.locale = 'zhCt') {
        proxy.$i18n.locale = 'zhCt'
   

    }
    store.setLocale(2)
    emit('childfn', !drawer)
 
}
const handleLang3 = () => {
    if (proxy.$i18n.locale = 'zhCn') {
        proxy.$i18n.locale = 'zhCn'
    }
    store.setLocale(3)
    emit('childfn', !drawer)
}

</script>

<style lang="scss" scoped>
.version-container{
    position: absolute;
    top: 0;
    left: 0;
}
.version-number{
    color: #fff;
    font-size:15px
 }
.wrapddd {
    width: 80vw;
    transform: translateX(-20px);
    display: flex;
    flex-direction: column;
   
// .version-container1{
//     position: absolute;
//     top: 0;
//     left: 0;
// }
 
    .imgWrap22222 {
        margin-top: 20px;
        width: fit-content;
        height: 20px;
        margin-left: 15px;
        display: flex;
        justify-content: center;
        align-items: center;

        // background-color: black;
        img {
            width: 25px;
            height: 20px;
        }

        h4 {
            font-size: 18px;
            margin-left: 10px;
            color: #fff;
            font-weight: 400;
        }
    }

    .nav {
        height: fit-content;
        margin-top: 20px;
        width: 100%;

        >li {
            display: flex;
            align-items: center;
            justify-self: center;
            min-height: 50px;
            padding-left: 15px;
            margin-top: 10px;
            background-color: #B4C0C7;

            &.active {
                background-color: #fff
            }

            img {
                width: 22px;
                height: 22px;
                // background-color: red;
            }

            span {
                margin-left: 25px;
                font-size: 20px;
                font-weight: 700;
                color: #1C3F56;
                display: block;
                line-height: 50px;
              //  padding-top: 6px;
            }
        }

        .IPO {
            flex-direction: column;
            justify-content: center;
            height: fit-content;

            .lang {
                margin-left: -90px;
                color: #1C3F56;
                font-size: 18px;

                >li {
                    line-height: 24px;
                }
            }

            .report {
                margin-left: -120px;

                span {
                    margin-right: 10px;
                }
            }

            .ipoWrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;


                .icon {
                    min-height: 50px;
                    display: flex;
                    align-items: center;
                    justify-self: center;

                    img {
                        width: 22px;
                        height: 22px;
                    }

                    span {
                        margin-left: 25px;
                        font-size: 20px;
                        font-weight: 700;
                        color: #1C3F56;
                        display: block;
                        line-height: 50px;
                        padding: 0;
                        vertical-align: bottom;
                    }
                }

                .arrow {
                    width: 12px;
                    height: 19px;
                    margin-right: 14px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }


            span {
                display: inline-block;
                // transform: translateY(-3px);
            }


        }
    }

}

</style>
<style>
/* .el-drawer__body{
    padding: 0 
} */
</style>